<template >
<div>
  <Nav></Nav>

    <scroller
      style="margin-top: 50px;"
      :on-refresh="refresh"
      :on-infinite="infinite"
      ref="my_scroller"
    >

      <Block class="message"
        v-for="item in items"
        :key="item.id"
        :block="item"

      ></Block>
    </scroller>

</div>
    
  

</template>

 <script>
import Block from "./components/Block.vue";
import Nav from "./components/Nav.vue";
import VueScroller from "vue-scroller";
import Vue from "vue";
Vue.use(VueScroller);
export default {
  name: "Blocks",
  data: function() {
    return {
      items: []
    };
  },
  mounted: function() {
    for (let i = 1; i <= 2; i++) {
      this.items.push({
        id: i,
        type: "体育",
        head:
          "https://pic4.zhimg.com/v2-4ae5233309aec5bc6b7f45fe11c4d777_is.jpg",
        nickname: "xxx" + i,
        title: " 18分钟19分按板凳席，老鹰快裁了林书豪吧，换成勇士不是这种结果",
        img:
          "https://pic3.zhimg.com/50/v2-7573f83454041be38299a2488cdfebb1_400x224.jpg",
        content:
          "北京时间11月7号，刚刚结束的一场NBA常规赛里，黄蜂主场113-102大胜黄蜂，这场比赛看得真揪心！",
        upvoteAmount: 100 + i,
        commentAmount: 200 + i
      });
    }
    this.top = 1;
    this.bottom = 2;
  },
  methods: {
    refresh(done) {
      setTimeout(() => {
        //刷新data数据，并且使数组随机排列
        this.items.sort(function() {
          return Math.random() > 0.5 ? -1 : 1;
        });

        done();
      }, 1000);
    },
    infinite(done) {
      setTimeout(() => {
        let start = this.bottom + 1;
        for (let i = start; i < start + 2; i++) {
          this.items.push({
            id: i,
            type: "体育",
            head:
              "https://pic4.zhimg.com/v2-4ae5233309aec5bc6b7f45fe11c4d777_is.jpg",
            nickname: "xxx" + i,
            title:
              " 18分钟19分按板凳席，老鹰快裁了林书豪吧，换成勇士不是这种结果",
            img:
              "https://pic3.zhimg.com/50/v2-7573f83454041be38299a2488cdfebb1_400x224.jpg",
            content:
              "北京时间11月7号，刚刚结束的一场NBA常规赛里，黄蜂主场113-102大胜黄蜂，这场比赛看得真揪心！",
            upvoteAmount: 100 + i,
            commentAmount: 200 + i
          });
        }
        this.bottom = this.bottom + 2;
        done();
      }, 1500);
    }
  },

  components: {
    
   Nav, Block
  }
};
</script>
<style scoped>
.message{
margin-top:4px;

}
</style>